<template>
  <el-container>
    <el-header height="40px" style="background-color: #00838f;position: relative">
      <h3 style="color: #fff;line-height: 40px;font-family: 'Microsoft YaHei',serif;width: 50%">购物车数据分析</h3>
    </el-header>
    <el-main style="background-color: #fff;">
      <el-container>
        <el-main>
          <div id="shoppingCartChart"></div>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'shoppingCartAnalysis',
  methods: {
    create () {
      this.$axiosx.get('/api/getShoppingCartData')
        .then((response) => {
          let xArr = response => {
            let xArr = []
            response.data.forEach((val, index, arr) => {
              xArr.push(
                '编号：' + val.SKU_code +
                ' \n 名称：' + val.SKU_name +
                ' \n 售价：' + val.sell_price +
                ' \n 库存：' + val.stock)
            })
            return xArr
          }
          let yArr = response => {
            let yArr = []
            response.data.forEach((val, index, arr) => {
              yArr.push(val.addNum)
            })
            return yArr
          }
          let myChart = echarts.init(document.getElementById('shoppingCartChart'))
          $('#shoppingCartChart canvas').height('70vh')
          let options = {
            title: {
              text: 'SKU购物车数量统计',
              textStyle: {
                color: '#00838f'
              }
            },
            color: ['#00838f'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              position: 'bottom',
              type: 'category',
              name: 'SKU',
              nameGap: 20,
              data: xArr(response),
              // axisTick: {
              //   alignWithLabel: true
              // },
              // axisLabel: {
              //   interval: 0,
              //   rotate: 90
              // }
            },
            yAxis: {
              type: 'value',
              name: '总加入量',
              minInterval: 1
            },
            series: [
              {
                name: '总加入量',
                type: 'bar',
                barWidth: '60%',
                data: yArr(response)
              }
            ]
          }
          myChart.setOption(options)
        })
        .catch(error => console.log(error.message))
    }
  },
  mounted () {
    this.create()
  }
}
</script>

<style scoped>
  #shoppingCartChart {
    height: 70vh;
  }
</style>
